<template>
  <div class="container">
    <h2 v-html="title"></h2>
    <div class="cont-span">
      <span>{{createTime | parseTimeByString}}</span>
      <span v-html="username" class="span-name"></span>
      <i class="el-icon-view"></i>
      <span v-html="visits"></span>
    </div>
    <div class="contac-div">
      <div v-html="articleBody" style="width: 60%"></div>
    </div>
  </div>
</template>

<script>

import { parseTimeByString } from '@/filters'

export default {
  name: 'QuestionsSrtcles',
  components: {},
  props: {
    val: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      parseTimeByString,
      articleBody: '',
      createTime: '',
      title: '',
      username: '',
      visits: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getAbst()
  },
  mounted () {},
  methods: {
    getAbst () {
      this.articleBody = this.val.articleBody
      this.createTime = this.val.createTime
      this.title = this.val.title
      this.username = this.val.username
      this.visits = this.val.visits
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .contac-div {
    background-color: #F5F5F5;
    width: 100%;
    padding: 20px;
  }
  .cont-span {
    margin-left: 20px;
    font-size: 14px;
    .el-icon-view {
    margin: 0 8px;
    }
    .span-name {
        margin-left: 8px;
    }
  }
}
</style>
